<template>
  <header class="clearfix">
    <h1 class="logo">
      FYH Player
      <router-link :to="{name:'home'}"></router-link>
    </h1>
    <transition name="fade">
      <ul v-show="!isSearching">
        <li :class="{'active':path==='home'||path==='index'}">
          <router-link :to="{name:'home'}">首页</router-link>
        </li>
        <li :class="{'active':path==='fond'}">
          <router-link :to="{name:'fond'}">喜欢</router-link>
        </li>
        <li :class="{'active':path==='history'}">
          <router-link :to="{name:'history'}">历史记录</router-link>
        </li>
        <li v-if="false"><a href="/">上传</a></li>
        <li :class="{'active':path==='video'}" v-show="path==='video'">视频播放</li>
      </ul>
    </transition>
    <form @submit.prevent class="search" :class="{'searching_div':isSearching}">
      <input type="text" class="searching_input" placeholder="请输入搜索关键词"
             v-model="keyword"
             @focus="isSearching=true"
             @blur="cancelSearch"
             @keyup.enter="goSearch"
             ref="input"
      />
      <button class="search_btn" @click="goSearch"><font-awesome-icon :icon="faSearch" class="fa-search"/></button>
    </form>
  </header>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useVideoStore} from '@/stores'
import {library} from '@fortawesome/fontawesome-svg-core'
import {faSearch} from '@fortawesome/free-solid-svg-icons/faSearch'

library.add(faSearch)

const route = useRoute()
const router = useRouter()
const store = useVideoStore()

let keyword = ref<string>('')
let isSearching = ref<boolean>(false)
let path = ref<string>(route.path.split('/')[1])
let input = ref<HTMLElement | null>(null)

watch(route, (newRoute) => {
  path.value = newRoute.path.split('/')[1]
})

watch(path, () => {
  if (path.value === 'video') {
    let videoList = store.videoList
    let id = route.path.split('/')[2]
    let videoInfo = videoList.filter(video => video.id === Number(id))[0]
    document.title = videoInfo.title + ' - ' + videoInfo.author
  } else {
    document.title = 'FYH-Player'
  }
})

const cancelSearch = () => {
  setTimeout(() => {
    isSearching.value = false
    keyword.value = ''
    input.value?.blur()
  }, 100)
}

const goSearch = () => {
  router.push({
    name: 'search',
    query: {
      keyword: keyword.value.trim()
    }
  })
  if (path.value === 'search') {
    store.getVideoSearchList(keyword.value)
  }
  cancelSearch()
}
</script>

<style lang="less" scoped>
header {
  display: flex;
  position: relative;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  padding: 10px 0;

  .logo {
    position: relative;
    text-indent: -9999px;

    a {
      width: 200px;
      height: 40px;
      border-radius: 10px;
      background-image: url('../assets/images/logo.png');
      background-position: center;
      background-size: cover;

      position: absolute;
      left: 0;
    }
  }

  ul {
    width: 100%;
    margin-left: 210px;
    margin-right: 265px;
    font-size: 20px;
    display: flex;

    li {
      flex-grow: 1;
      display: block;
      width: 100px;
      text-align: center;
      line-height: 40px;
      margin: 0 20px;
      background-color: #e5848470;
      border-radius: 15px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      cursor: pointer;

      a {
        display: block;
      }

      &:hover {
        background-color: #884545e4;
      }
    }

    .active {
      background-color: #11abe1e8;
    }
  }

  .search {
    position: absolute;
    top: 10px;
    right: 10px;

    transition: all 0.3s;

    input {
      height: 40px;
      width: 245px;
      padding-left: 10px;
      padding-right: 30px;
      font-size: 16px;
      box-sizing: border-box;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      border-radius: 20px;
      border: 2px solid #e58484bd;
      border-right: none;
      outline: none;
      background-color: transparent;
      color: #e58484bd;

      &:focus {
        font-size: 18px;
        color: #11abe1e8;
        border-color: #11abe1e8;
        background-color: rgba(255, 255, 255, 0.7);
      }

      &:focus ~ button {
        color: #11abe1e8;
        border-color: #11abe1e8;
      }
    }

    .search_btn{
      height: 40px;
      width: 40px;
      color: #e58484bd;
      font-size: 16px;
      border-radius: 20px;
      border: 2px solid #e58484bd;
      background-color: transparent;

      position: absolute;
      right: 0;
      top: 0;

      &:hover{
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        border-color: #e58484bd;

        .fa-search {
          color: #e58484bd;
        }
      }
    }
  }

  .searching_div {
    right: calc(50% - 250px);

    .searching_input {
      width: 500px;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
